<template>
  <div style="width: 100%;height: 100%;background-color: #f4f4f4">
    <van-nav-bar title="水情监测"/>
    <van-grid column-num="3" icon-size="48px" :gutter="10" style="margin-top: 10px">
      <van-grid-item disabled  :icon="imgY" text="雨情信息" @click="turnToY"/>
      <van-grid-item  :icon="imgH" text="河道水情" @click="turnToH"/>
      <van-grid-item  :icon="imgS" text="水库水情" @click="turnToB"/>
      <van-grid-item  :icon="imgJ" text="河道监控" @click="openUrl"/>
    </van-grid>
    <div style="position: absolute;bottom: 0;width: 100vw">
      <van-field v-model="deviceId" label="设备ID" placeholder="" readonly />
    </div>
  </div>

</template>

<script>
  import { Notify } from 'vant';
  import API from "../api/api_common";

  export default {
        name: "Home",
        data(){
            return{
                imgH:require("../../static/heliu.png"),
                imgY:require("../../static/huabanfuben.png"),
                imgS:require("../../static/shuikudian.png"),
                imgJ:require("../../static/jiankong.png"),
              deviceId:"",
              login:false

            }
        },
    async created(){
      this.deviceId = this.getQueryString("id") || "";
      let res=await API.login({device:this.deviceId});
      if(res.date==1){
        this.login=true;
      }
    },
      mounted(){

      },
        methods:{
          getQueryString: function (variable) {
            let url = decodeURI(window.location.href);
            if (url.indexOf("?") == -1) {
              return;
            }
            let array = url.split("?");
            let query = array[1];
            let vars = query.split("&");
            for (let i = 0; i < vars.length; i++) {
              let pair = vars[i].split("=");
              if (pair[0] == variable) {
                return pair[1];
              }
            }
            return false;
          },
        turnToY(){
            if(!this.login){
              Notify({ type: 'danger', message: '未认证的设备' });
              return
            }
            this.$router.push({path:'/HelloWorld'})
        },turnToH(){
            if(!this.login){
              Notify({ type: 'danger', message: '未认证的设备' });
              return
            }
            this.$router.push({path:'/HelloWorldR'})
        },turnToB(){
            if(!this.login){
              Notify({ type: 'danger', message: '未认证的设备' });
              return
            }
            this.$router.push({path:'/HelloWorldH'})
        },
        openUrl(){
          if(!this.login){
            Notify({ type: 'danger', message: '未认证的设备' });
            return
          }
            Android.openWeb();
        }
        }
    }
</script>

<style lang="less">
  #app{
    .van-nav-bar {
      background-color: #308fff;

      .van-nav-bar__title {
        color: white;
      }

      .van-nav-bar__text {
        color: #ff8827;
      }
    }
  }

</style>
